<script setup lang="ts">
interface Props {
  common: boolean
  round?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  common: true,
  round: true
})

const closeDialog = inject('closeDialog', () => { })

const location = useBrowserLocation()
const { data: proData, runAsync } = useRequest(ApiMemberAgencyMyPromotion)

const qrUrl = computed(() => `${location.value.origin}${proData.value?.link_url ?? ''}`)

const shareText = computed(() => encodeURIComponent(qrUrl.value))

const socialData = computed(() => {
  return [
    {
      label: 'Facebook',
      img: '/images/png/setting/social-facebook.png',
      imgRound: '/images/png/setting/social-facebook-round.png',
      link: 'https://www.facebook.com/sharer/sharer.php?u=',
    },
    {
      label: 'Kwai',
      img: '/images/png/setting/social-kwai-round.png',
      imgRound: '/images/png/setting/social-kwai-round.png',
      link: 'https://www.kwai.com/?content=',
    },
    {
      label: 'TikTok',
      img: '/images/png/setting/social-tiktok.png',
      imgRound: '/images/png/setting/social-tiktok-round.png',
      link: 'https://www.tiktok.com/?text=',
    },
    {
      label: 'Telegram',
      img: '/images/png/setting/social-telegram.png',
      imgRound: '/images/png/setting/social-telegram-round.png',
      link: 'https://t.me/share/url?url=',
    },
    {
      label: 'Instagram',
      img: '/images/png/setting/social-instagram.png',
      imgRound: '/images/png/setting/social-instagram-round.png',
      link: 'https://www.instagram.com/?quote=',
    },
    {
      label: 'YouTube',
      img: '/images/png/setting/social-youtube.png',
      imgRound: '/images/png/setting/social-youtube-round.png',
      link: 'https://www.youtube.com/?text=',
    },
    {
      label: 'WhatsApp',
      img: '/images/png/setting/social-whatsapp.png',
      imgRound: '/images/png/setting/social-whatsapp-round.png',
      link: 'https://api.whatsapp.com/send?text=',
    },
    {
      label: 'LINE',
      img: '/images/png/setting/social-line.png',
      imgRound: '/images/png/setting/social-line-round.png',
      link: 'https://line.me/R/share?text=',
    },
    {
      label: 'X',
      img: '/images/png/setting/social-x.png',
      imgRound: '/images/png/setting/social-x-round.png',
      link: 'https://twitter.com/intent/tweet?text%20&url=',
    },
    {
      label: 'Gmail',
      img: '/images/png/setting/social-gmail.png',
      imgRound: '/images/png/setting/social-gmail-round.png',
      link: 'Gmail',
    },
  ]
})

function openKwaiApp() {
  const schemeUrl = `kwai://content=${shareText.value}`
  const fallbackUrl = `https://www.kwai.com/?content=${shareText.value}`
  const iframe = document.createElement('iframe')
  iframe.style.display = 'none'
  iframe.src = schemeUrl
  document.body.appendChild(iframe)

  setTimeout(() => {
    window.open(fallbackUrl, '_blank')
  }, 1500)
}

function openLink(item: any) {
  if (isFlutterApp()) {
    sendMsgToFlutterApp(SendFlutterAppMessage.PUBLIC_SHARE, { item, share: shareText })
    return
  }
  if (item.link === 'Gmail')
    window.location.href = `mailto:?subject=&body=${shareText}`
  else if (item.label === 'Kwai')
    openKwaiApp()
  else
    item.link && window.open((item.link + shareText.value), '_blank')
}

runAsync()
</script>
<template>
  <div class="mt-2">
    <div class="flex justify-center flex-wrap gap-[.625rem] mt-4.5 sm:px-8">
      <div v-for="(item, index) in socialData" :key="index" class="inline-flex min-w-15 flex-col items-center share-item"  @click="openLink(item)">
        <BaseImage :url="round ? item.imgRound : item.img"  class="w-10 h-10 mb-1.5"  />
        <span class="text-text-white-2 text-xs font-semibold leading-[.875rem]"> {{ item.label }}</span>
      </div>
    </div>
    <div class="mt-4 rounded-lg flex justify-between items-center border border-[var(--color-bg-black-5)] pl-3 pr-1 py-1 bg-bg-black-1">
      <div class="text-brand text-sm whitespace-nowrap flex-1 overflow-hidden">{{ qrUrl }}</div>
      <BaseButton @click="application.copy(qrUrl, $t)"  class="h-8 rounded-md text-center leading-8 px-2 text-text-white-0 text-xs font-bold" type="secondary">{{ $t('affiliate_program_copy') }}</BaseButton>
    </div>
  </div>
</template>
<style scoped lang="scss"></style>
